<script lang="ts" setup>
import type { UploadChangeParam } from 'ant-design-vue';

import { computed, ref } from 'vue';

import { MdiAdd, MdiEdit } from '@vben/icons';

import {
  Button,
  Divider,
  Image,
  Input,
  message,
  Spin,
  Upload,
} from 'ant-design-vue';

import { updateHotelBaseInfoApi } from '#/api';
import { accept, headers, upApi } from '#/config/uploadConfig';

const props = defineProps({
  form: {
    type: Object,
    default: () => ({}),
  },
  defaultForm: {
    type: Object,
    default: () => ({}),
  },
  editStatus: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(['update:form', 'update:editStatus', 'init']);

const formData = computed({
  get() {
    return props.form;
  },
  set(newValue) {
    emit('update:form', newValue);
  },
});

const edit = computed({
  get() {
    return props.editStatus;
  },
  set(newValue) {
    emit('update:editStatus', newValue);
  },
});

// 通知父组件初始化一些接口
const init = () => {
  emit('init');
};

// 取消编辑事件
const cancelEdit = (key: string) => {
  edit.value[key] = false;
  init();
};

// 打开编辑事件 并关闭其他的编辑状态
const openEdit = (key: string) => {
  edit.value[key] = true;
  Object.keys(edit.value).forEach((item) => {
    if (item !== key && edit.value[item]) {
      cancelEdit(item);
    }
  });
};

const uploadLoading = ref(false);

const handleChange = async (info: UploadChangeParam) => {
  if (info.file.status === 'uploading') {
    uploadLoading.value = true;
    return;
  }
  if (info.file.status === 'done') {
    const imgUrl = info.file?.response?.data?.url || '';
    formData.value.coverImage = imgUrl;
    uploadLoading.value = false;
  } else if (info.file.status === 'error') {
    message.error(`${info.file.name}图片上传失败`);
    uploadLoading.value = false;
  }
};

// 保存事件
const handleSave = async (key: string) => {
  let params = {};
  const arr: { [key: string]: any } = {
    hotelNameZh: 'editName',
    addressZh: 'editAddress',
    phone: 'editPhone',
    coverImage: 'editCoverImage',
  };
  // 处理提交参数
  params = {
    ...props.defaultForm,
    addressName: formData.value.addressName,
    longitude: formData.value.longitude,
    latitude: formData.value.latitude,
    [key]: formData.value[key],
  };
  try {
    await updateHotelBaseInfoApi(params);
    message.success('保存成功');
    cancelEdit(arr[key]);
  } catch (error) {
    console.error('保存失败：', error);
  }
};
</script>

<template>
  <div class="card-box mb-3 w-full rounded-md p-2">
    <div class="px-4 pb-6">
      <div class="pt-2">
        <div class="text-xl font-bold">基本信息</div>
      </div>
      <div>
        <div
          :class="[edit.editName ? 'sticky top-[-21px]' : ' ']"
          class="card-box z-[10] flex items-center justify-between rounded-none border-none py-2 text-xl"
        >
          <div>酒店名称</div>
          <div v-if="!edit.editName">
            <Button
              class="flex h-auto items-center px-0"
              type="link"
              @click="openEdit('editName')"
            >
              <template #icon>
                <MdiEdit class="text-primary mr-1" />
              </template>
              <span>编辑</span>
            </Button>
          </div>
          <div v-else class="flex items-center">
            <Button
              class="flex h-auto items-center px-6 py-2"
              @click="cancelEdit('editName')"
            >
              <span>取消</span>
            </Button>
            <Button
              :disabled="formData.hotelNameZh === ''"
              class="ml-2 flex h-auto items-center px-6 py-2"
              type="primary"
              @click="handleSave('hotelNameZh')"
            >
              <span>保存</span>
            </Button>
          </div>
        </div>
        <div v-if="!edit.editName">
          <div>
            <span>{{ formData.hotelNameZh || '暂无' }}</span>
            <span v-if="formData.addressName">
              （{{ formData.addressName }}）
            </span>
          </div>
        </div>
        <div v-else>
          <div>中文名称<span class="ml-1 text-red-500">*</span></div>
          <div class="flex items-center pt-2">
            <Input
              v-model:value="formData.hotelNameZh"
              :maxlength="30"
              :show-count="true"
              :status="formData.hotelNameZh === '' ? 'error' : ''"
              class="w-[460px] py-2"
              placeholder="请输入酒店中文名称"
            />
          </div>
          <div class="mt-3">
            地址名称<span class="ml-1 text-red-500">*</span>
            <span class="ml-2 text-gray-400">如：铁道学院爱尔眼科地铁站店</span>
          </div>
          <div class="flex items-center pt-2">
            <Input
              v-model:value="formData.addressName"
              :maxlength="30"
              :show-count="true"
              :status="formData.addressName === '' ? 'error' : ''"
              class="w-[460px] py-2"
              placeholder="请输入酒店地址名称"
            />
          </div>
        </div>
      </div>
      <Divider class="mb-3 mt-6" />
      <div>
        <div
          :class="[edit.editAddress ? 'sticky top-[-21px]' : ' ']"
          class="card-box z-[10] flex items-center justify-between rounded-none border-none py-2 text-xl"
        >
          <div>地址</div>
          <div v-if="!edit.editAddress">
            <Button
              class="flex h-auto items-center px-0"
              type="link"
              @click="openEdit('editAddress')"
            >
              <template #icon>
                <MdiEdit class="text-primary mr-1" />
              </template>
              <span>编辑</span>
            </Button>
          </div>
          <div v-else class="flex items-center">
            <Button
              class="flex h-auto items-center px-6 py-2"
              @click="cancelEdit('editAddress')"
            >
              <span>取消</span>
            </Button>
            <Button
              :disabled="
                formData.addressZh === '' ||
                formData.longitude === '' ||
                formData.latitude === ''
              "
              class="ml-2 flex h-auto items-center px-6 py-2"
              type="primary"
              @click="handleSave('addressZh')"
            >
              <span>保存</span>
            </Button>
          </div>
        </div>
        <div v-if="!edit.editAddress">
          <p>酒店地址：{{ formData.addressZh || '暂无' }}</p>
          <p class="mt-2">经度：{{ formData.longitude || '暂无' }}</p>
          <p class="mt-2">纬度：{{ formData.latitude || '暂无' }}</p>
        </div>
        <div v-else>
          <div>酒店地址<span class="ml-1 text-red-500">*</span></div>
          <div class="flex items-center pt-2">
            <Input
              v-model:value="formData.addressZh"
              :maxlength="80"
              :show-count="true"
              :status="formData.addressZh === '' ? 'error' : ''"
              class="w-[460px] py-2"
              placeholder="请输入酒店地址"
            />
          </div>
          <div class="mt-2">
            地址经度<span class="ml-1 text-red-500">*</span>
          </div>
          <div class="pt-2">
            <Input
              v-model:value="formData.longitude"
              :status="formData.longitude === '' ? 'error' : ''"
              class="w-[460px] py-2"
              placeholder="请输入地址经度"
              type="number"
            />
            <p class="mt-1 text-gray-400">经度范围：-180 至 180</p>
          </div>
          <div class="mt-2">
            地址纬度<span class="ml-1 text-red-500">*</span>
          </div>
          <div class="pt-2">
            <Input
              v-model:value="formData.latitude"
              :status="formData.latitude === '' ? 'error' : ''"
              class="w-[460px] py-2"
              placeholder="请输入地址纬度"
              type="number"
            />
            <p class="mt-1 text-gray-400">纬度范围：-90 至 90</p>
          </div>
          <p class="mt-2 flex text-sm text-gray-500">
            经纬度信息可以前往腾讯地图获取
            <a
              class="text-primary"
              href="https://lbs.qq.com/getPoint/"
              target="_blank"
            >
              [点击跳转]
            </a>
          </p>
        </div>
      </div>
      <Divider class="mb-3 mt-6" />
      <div>
        <div
          :class="[edit.editPhone ? 'sticky top-[-21px]' : ' ']"
          class="card-box z-[10] flex items-center justify-between rounded-none border-none py-2 text-xl"
        >
          <div>酒店总机</div>
          <div v-if="!edit.editPhone">
            <Button
              class="flex h-auto items-center px-0"
              type="link"
              @click="openEdit('editPhone')"
            >
              <template #icon>
                <MdiEdit class="text-primary mr-1" />
              </template>
              <span>编辑</span>
            </Button>
          </div>
          <div v-else class="flex items-center">
            <Button
              class="flex h-auto items-center px-6 py-2"
              @click="cancelEdit('editPhone')"
            >
              <span>取消</span>
            </Button>
            <Button
              :disabled="formData.phone === ''"
              class="ml-2 flex h-auto items-center px-6 py-2"
              type="primary"
              @click="handleSave('phone')"
            >
              <span>保存</span>
            </Button>
          </div>
        </div>
        <div v-if="!edit.editPhone">
          <p>{{ formData.phone || '暂无' }}</p>
        </div>
        <div v-else>
          <div>
            酒店联系电话(前台客服)<span class="ml-1 text-red-500">*</span>
          </div>
          <div class="flex items-center pt-2">
            <Input
              v-model:value="formData.phone"
              :status="formData.phone === '' ? 'error' : ''"
              class="w-[460px] py-2"
              placeholder="请输入酒店总机号码"
              type="number"
            />
          </div>
        </div>
      </div>
      <Divider class="mb-3 mt-6" />
      <div>
        <div
          :class="[edit.editCoverImage ? 'sticky top-[-21px]' : ' ']"
          class="card-box z-[10] flex items-center justify-between rounded-none border-none py-2 text-xl"
        >
          <div>酒店首图</div>
          <div v-if="!edit.editCoverImage">
            <Button
              class="flex h-auto items-center px-0"
              type="link"
              @click="openEdit('editCoverImage')"
            >
              <template #icon>
                <MdiEdit class="text-primary mr-1" />
              </template>
              <span>编辑</span>
            </Button>
          </div>
          <div v-else class="flex items-center">
            <Button
              class="flex h-auto items-center px-6 py-2"
              @click="cancelEdit('editCoverImage')"
            >
              <span>取消</span>
            </Button>
            <Button
              :disabled="formData.coverImage === ''"
              class="ml-2 flex h-auto items-center px-6 py-2"
              type="primary"
              @click="handleSave('coverImage')"
            >
              <span>保存</span>
            </Button>
          </div>
        </div>
        <div v-if="!edit.editCoverImage">
          <Image
            v-if="formData.coverImage"
            :height="140"
            :src="formData.coverImage"
          />
          <p v-else>暂无</p>
        </div>
        <div v-else>
          <div class="flex items-center">
            <div
              v-if="uploadLoading || formData.coverImage"
              class="image-list relative mr-3"
            >
              <Spin
                v-if="uploadLoading"
                class="absolute left-0 top-0 z-10 flex h-full w-full flex-col items-center justify-center bg-white bg-opacity-60"
                tip="上传中..."
              />
              <Image
                v-if="formData.coverImage"
                :height="140"
                :src="formData.coverImage"
                :width="140"
              />
            </div>
            <div
              class="image-list hover:text-primary-500 hover:border-primary-500 relative flex cursor-pointer flex-col items-center justify-center rounded-md border border-dashed border-gray-400"
            >
              <MdiAdd class="text-2xl" />
              <span class="text-base">点击上传</span>
              <Upload
                :accept="accept"
                :action="upApi"
                :headers="headers"
                :max-count="1"
                :multiple="false"
                :show-upload-list="false"
                class="absolute left-0 top-0 opacity-0"
                name="file"
                @change="handleChange"
              >
                <Button>上传</Button>
              </Upload>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
:deep(.ant-upload) {
  display: block;
  width: 140px;
  height: 140px;
}

.image-list {
  width: 140px;
  height: 140px;

  &-img {
    height: 140px;
  }

  &-text {
    height: 30px;
  }

  &:hover .image-edit {
    opacity: 1;
  }
}
</style>
